<template>
	<div class="md-button-tab">
		<div class="md-button-tab-list">
			<a
				v-for="(v,k) in items"
				:key="k"
				class="md-button-tab-item"
				:class="{ 'md-button-tab-item-active': isActive == k }"
				@click="$_onClick(v, k)"
			>{{v.text}}</a>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'ynet-button-tab',
		data(){
			return {
				active: null
			}
		},
		props: {
			items: {
				type: Array,
				default(){
					return []
				}
			}
		},
		computed: {
			isActive(){
				if(this.active !== null){
					return this.active
				}
				const active = this.items.findIndex(cur => (cur.active && cur.active === true))
				return active == -1 ? 0 : active
			}
		},
		methods: {
			$_onClick(item, index){
				this.active = index
				this.$emit('change', item)
			}
		}
	}
</script>
<style lang="stylus">
.md-button-tab
	width 100%
	position relative
	.md-button-tab-list
		box-sizing content-box
		width 100%
		height 100%
		display flex
		align-items center
		text-align center
		border solid 1px button-tab-list-border-color
		border-radius button-tab-list-border-radius
		.md-button-tab-item
			overflow hidden
			white-space nowrap
			text-overflow ellipsis
			padding 0 0px
			height button-tab-item-height
			line-height button-tab-item-height
			position relative
			flex 1
			color button-tab-item-color
			&:not(:last-of-type)
				border-right: solid 1px button-tab-list-border-color
			&:last-of-type
				border-right: none
		.md-button-tab-item-active
			background button-tab-list-border-color
			color button-tab-item-active-color
			font-weight button-tab-item-active-font-weight
</style>